<style lang="less">
    @import "loanRepairApproveTask.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row class="operation">
                        <Button @click="batchProcess" type="primary" icon="ios-done-all">批量通过</Button>
                    </Row>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form" >
                            <Form-item label="申请编号" prop="applyNo">
                                <Input type="text" v-model="searchForm.applyNo" clearable placeholder="请输入申请编号" style="width: 200px"/>
                            </Form-item>
                            <Form-item label="合作商名称" prop="dealerName">
                                <Input v-model="searchForm.dealerName" type="text" placeholder="请输入合作商名称" style="width:200px"/>
                            </Form-item>
                            <span v-if="drop">
                                <Form-item label="客户姓名" prop="custName">
                                    <Input type="text" v-model="searchForm.custName" clearable placeholder="请输入客户姓名" style="width: 200px"/>
                                </Form-item>
                                <Form-item label="案件状态(内)" prop="repairStatusIn">
                                    <Select v-model="searchForm.repairStatusIn" clearable placeholder="请选择案件状态" style="width:200px">
                                        <Option v-for="item in dataDic.repairStatusIn" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="渠道类型" prop="channelType">
                                    <Select v-model="searchForm.channelType" clearable placeholder="请选择渠道类型" style="width:200px">
                                        <Option v-for="item in dataDic.channelType" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="业务分类" prop="businessType">
                                    <Select v-model="searchForm.businessType" clearable placeholder="请选择业务分类" style="width:200px">
                                        <Option v-for="item in dataDic.confBusinessType" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="车辆属性" prop="carNature">
                                    <Select v-model="searchForm.carNature" clearable placeholder="请选择车辆属性" style="width:200px">
                                        <Option v-for="item in dataDic.carNature" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="车辆类型" prop="carType">
                                    <Select v-model="searchForm.carType" clearable placeholder="请选择车辆类型" style="width:200px">
                                        <Option v-for="item in dataDic.carType" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="运营方式" prop="operateWay">
                                    <Select v-model="searchForm.operateWay" clearable placeholder="请选择运营方式" style="width:200px">
                                        <Option v-for="item in dataDic.operateWay" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="挂靠方式" prop="affiliatedWay">
                                    <Select v-model="searchForm.affiliatedWay" clearable placeholder="请选择挂靠方式" style="width:200px">
                                        <Option v-for="item in dataDic.affiliatedWay" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="放款申请时间">
                                        <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd" clearable
                                                    @on-change="selectDateRange" placeholder="选择起始时间"
                                                    style="width: 200px"></DatePicker>
                                </Form-item>
                                <Form-item label="车辆品牌" prop="brandCode">
                                    <Select v-model="searchForm.brandCode" clearable placeholder="请选择放款模式" style="width:200px">
                                        <!--TODO 待补充车辆品牌下拉列表-->
                                    </Select>
                                </Form-item>
                                <Form-item label="优先级" prop="priority">
                                    <Select v-model="searchForm.priority" clearable placeholder="请选择优先级" style="width:200px">
                                       <Option v-for="item in dataDic.priority" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="放款模式" prop="lendingMode">
                                    <Select v-model="searchForm.lendingMode" clearable placeholder="请选择放款模式" style="width:200px">
                                        <Option v-for="item in dataDic.lendingMode" :label="item.title" :value="item.value" :key="item.value">{{item.title}}</Option>
                                    </Select>
                                </Form-item>
                            </span>
                            <Form-item style="margin-left: -35px;" v-if="dropDownContent=='展开'">
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                            <Form-item style="margin-left: -65px;width:100%;text-align: center;" v-if="dropDownContent=='收起'">
                                <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                                <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row>
                        <Table v-bind:loading="loading" border v-bind:columns="columns" v-bind:data="data" sortable="custom"
                               @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table">
                            <template slot-scope="{ row, index }" slot="tags">
                            </template>
                            <template slot-scope="{row , index}" slot="repairStatusIn">
                                <span>{{setRepairStatusInTitle(row.repairStatusIn)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="confBusinessType">
                                <span>{{setConfBusinessTypeTitle(row.businessType)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="lendingMode">
                                <span>{{setLendingModeTitle(row.lendingMode)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="priority">
                                <span>{{setPriorityTitle(row.priority)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="channelGrade">
                                <span>{{setChannelGradeTitle(row.channelGrade)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="applyNo">
                                <router-link tag="a" target="_top" :to="{path:'/loanApproveDetail',query:{taskId:row.taskId,applyNo:row.applyNo}}">
                                    {{row.applyNo}}
                                </router-link>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page v-bind:current="searchForm.pageNumber" v-bind:total="total" v-bind:page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" v-bind:page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import circleLoading from "_c/circle-loading/circle-loading.vue";
    import {
        getByTypes,
        getDictDataByType
    } from "_p/basic/api/admin/datadic";
    import {
        getLoanRepairApproveTaskList
    } from "@/projects/afs-core-business/api/afs-case/loan-approve/loanRepairApproveTask";

    export default {
        name: "loanRepairApproveTask",
        components: {
            circleLoading
        },
        /*mounted() {
            this.init();
        },*/
        activated() {
            this.init()
        },
        data(){

            return{
                loading: true,
                operationLoading: false,
                importLoading: false,
                loadingExport: true,
                drop: false,
                dropDownContent: "展开",
                dropDownIcon:"ios-arrow-down",
                dicKeys: [
                    "confBusinessType","repairStatusIn","carType","carNature","operateWay","affiliatedWay","lendingMode","channelType","priority"
                ],
                confBusinessType:[],
                repairStatusIn:[],
                lendingMode:[],
                channelType:[],
                priority:[],
                dataDic: {},
                selectCount: 0,
                selectList: [],
                viewImage: false,
                deptId: [],
                selectDep: [],
                department: [],
                dataDep: [],
                searchKey: "",
                selectDate: null,
                searchForm:{
                    applyNo:"",
                    custName:"",
                    dealerName:"",
                    repairStatusIn:"",
                    carNature:"",
                    carType:"",
                    operateWay:"",
                    affiliatedWay:"",
                    lendingMode:"",
                    lendingFirstStartDate: "",
                    lendingFirstEndDate: "",
                    priority:"",
                    pageNumber: 1,
                    pageSize: 10
                },
                submitLoading:false,
                columns:[
                    {
                        type:"selection",
                        minWidth:60,
                        maxWidth:60,
                        align:"center",
                        fixed:"left"
                    },
                    {
                        title:"案件状态",
                        key:"repairStatusIn",
                        minWidth:120,
                        slot:"repairStatusIn",
                        fixed: "left"
                    },
                    {
                        title:"合作商名称",
                        key:"dealerName",
                        minWidth:100,
                        fixed: "left"
                    },
                    {
                        title:"渠道评级",
                        key:"channelGrade",
                        minWidth:100,
                        fixed: "left"
                    },
                    {
                        title:"客户姓名",
                        key:"custName",
                        minWidth:100,
                        fixed: "left",
                        tooltip: true//显示提示
                    },
                    {
                        title:"案件标记",
                        key:"labelId",
                        minWidth:120,
                        slot:"tags"
                    },
                    {
                        title:"申请编号",
                        key:"applyNo",
                        minWidth:60,
                        fixed: "left",
                        tooltip: true,//显示提示
                        slot:"applyNo"
                    },
                    {
                        title:"车辆品牌",
                        key:"brandCode",
                        minWidth:100,
                        fixed: "left"
                    },
                    {
                        title:"业务分类",
                        key:"businessType",
                        slot:"confBusinessType",
                        minWidth:100,
                        fixed: "left"
                    },
                    {
                        title:"放款模式",
                        key:"lendingMode",
                        slot:"lendingMode",
                        minWidth:100,
                        fixed: "left"
                    },
                    {
                        title:"优先级",
                        key:"priority",
                        slot:"priority",
                        minWidth:70,
                        fixed: "left"
                    },
                    {
                        title:"放款申请时间",
                        key:"lendingFirstDate",
                        minWidth:130,
                        fixed: "left"
                    }
                ],
                data:[],
                total:0
            };
        },

        methods: {
            init() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();
                this.initDataDic();
            },
            initDataDic(){
                let self = this;
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === "0000" && res.data) {
                        self.dataDic = res.data;
                        this.confBusinessType.push(...res.data.confBusinessType);
                        this.repairStatusIn.push(...res.data.repairStatusIn);
                        this.lendingMode.push(...res.data.lendingMode);
                        this.priority.push(...res.data.priority);
                        this.channelType.push(...res.data.channelType);
                    }
                });
            },
            setRepairStatusInTitle(val){
                let dic = {}
                this.repairStatusIn.forEach(colunm => {
                        if (colunm.value === val){
                            dic=colunm;
                        }
                    }
                );
                return dic.title;
            },
            setConfBusinessTypeTitle(val){
                let dic = {}
                this.confBusinessType.forEach(colunm => {
                        if (colunm.value === val){
                            dic=colunm;
                        }
                    }
                );
                return dic.title;
            },
            setLendingModeTitle(val){
                let dic = {}
                this.lendingMode.forEach(colunm => {
                        if (colunm.value === val){
                            dic=colunm;
                        }
                    }
                );
                return dic.title;
            },
            setChannelGradeTitle(val){
                let dic = {}
                this.channelGrade.forEach(colunm => {
                        if (colunm.value === val){
                            dic=colunm;
                        }
                    }
                );
                return dic.title;
            },
            setPriorityTitle(val){
                let dic = {}
                this.priority.forEach(colunm => {
                        if (colunm.value === val){
                            dic=colunm;
                        }
                    }
                );
                return dic.title;
            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.lendingFirstStartDate = v[0];
                    this.searchForm.lendingFirstEndDate = v[1];
                }
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "展开";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.lendingFirstStartDate = "";
                this.searchForm.lendingFirstEndDate = "";

                // 重新加载数据
                this.getTaskList();
            },
            seizeTask() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.lendingFirstStartDate = "";
                this.searchForm.lendingFirstEndDate = "";
            },
            getTaskList(){
                this.loading = true;
                getLoanRepairApproveTaskList(this.searchForm).then(res =>{
                    this.loading=false;
                    if(res.code === "0000"){
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getTaskList();
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getTaskList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getTaskList();
            },
            batchProcess(){

            }
        }
    };
</script>

<style scoped>

</style>
